import { HomeOutlined } from '@ant-design/icons';
import React, { ReactNode, useState } from 'react';
import './Visualization.less';
// @ts-ignore
import { BorderBox10 } from '@jiaminghi/data-view-react';
import clsx from 'clsx';
import Chart1 from './components/Chart1';
import Chart2 from './components/Chart2';
import Chart3 from './components/Chart3';
import Chart4 from './components/Chart4';
import Chart5 from './components/Chart5';
import Chart6 from './components/Chart6';
import Chart7 from './components/Chart7';

interface NavItem {
  key: number;
  title: string;
  icon: ReactNode;
  content: ReactNode;
}

const navList: NavItem[] = [
  {
    key: 1,
    title: '中药产量排行',
    icon: <HomeOutlined />,
    content: <Chart1 />,
  },
  {
    key: 2,
    title: '中药产地分布',
    icon: <HomeOutlined />,
    content: <Chart2 />,
  },
  {
    key: 3,
    title: '中药类型销量',
    icon: <HomeOutlined />,
    content: <Chart3 />,
  },
  {
    key: 4,
    title: '中药剂型统计',
    icon: <HomeOutlined />,
    content: <Chart4 />,
  },
  {
    key: 5,
    title: '中药药方统计',
    icon: <HomeOutlined />,
    content: <Chart5 />,
  },
  {
    key: 6,
    title: '中药处方类型',
    icon: <HomeOutlined />,
    content: <Chart6 />,
  },
  {
    key: 7,
    title: '中药材料统计',
    icon: <HomeOutlined />,
    content: <Chart7 />,
  },
];

const Visualization: React.FC = () => {
  const [navItem, setNavItem] = useState<NavItem>(navList[0]);
  return (
    <div className="Visualization">
      <div className="Visualization-left">
        {navList.map((i) => (
          <div key={i.key} className={clsx('Visualization-left-item', 'cp', { 'Visualization-left-active': i.key === navItem.key })} onClick={() => setNavItem(i)}>
            {/* {i.icon} */}
            {i.title}
          </div>
        ))}
      </div>
      <div className="Visualization-right">
        <BorderBox10>
          <div className="Visualization-right-box">
            <div className="Visualization-right-title">{navItem.title}</div>
            <div className="Visualization-right-chart">{navItem.content}</div>
          </div>
        </BorderBox10>
      </div>
    </div>
  );
};

export default Visualization;
